<template>
  <view>
    <u-dropdown :active-color="active_color" ref="uDropdown" :title-size="title_size">
      <u-dropdown-item v-if="options.includes('provinceName')" v-model="queryObject.provinceName" :title="queryObject.provinceName || '全部省份'">
        <view class="slot-content u-padding-30 bg-fff">
          <scroll-view scroll-y style="height: 500rpx">
            <view class="u-text-center u-flex u-flex-wrap choose_wrapper">
              <view class="item_choose u-m-b-20 u-font-sm"
                    v-if="!liandong"
                    :class="{'active_choose': queryObject.provinceName==''}"
                    @click="chooseItem('provinceName', '')"
              >全部省份</view>
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('provinceName', item.dictValue)"
                    :class="{'active_choose': queryObject.provinceName==item.dictValue}" :key="index"
                    v-for="(item, index) in provinceName">{{item.dictValue}}</view>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
            </view>
          </scroll-view>
          <view class="u-flex flex-center u-p-t-20">
            <u-button size="medium" type="primary" :customStyle="customStyle" @click="closeDropdown('provinceName')">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item v-if="options.includes('year')" v-model="queryObject.year" :title="queryObject.year || '年份'">
        <view class="slot-content u-padding-30 bg-fff">
          <scroll-view scroll-y style="height: 500rpx">
            <view class="u-text-center u-flex u-flex-wrap choose_wrapper">
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('year', '')"
                    v-if="!liandong"
                    :class="{'active_choose': queryObject.year==''}"
              >不限</view>
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('year', item.dictValue)"
                    :class="{'active_choose': queryObject.year==item.dictValue}"
                    :key="index"
                    v-for="(item, index) in year">{{item.dictValue}}</view>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
            </view>
          </scroll-view>
          <view class="u-flex flex-center u-p-t-20">
            <u-button size="medium" type="primary" :customStyle="customStyle" @click="closeDropdown('year')">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item v-if="options.includes('wOrL')" v-model="queryObject.wOrL" :title="queryObject.wOrL || '类型'">
        <view class="slot-content u-padding-30 bg-fff">
          <scroll-view scroll-y style="height: 200rpx">
            <view class="u-text-center u-flex u-flex-wrap choose_wrapper">
              <view class="item_choose u-m-b-20 u-font-sm"
                    :class="{'active_choose': queryObject.wOrL==''}"
                    @click="chooseItem('wOrL', '')"
                    v-if="!liandong"
              >全部</view>
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('wOrL', item.dictValue)"
                    :class="{'active_choose': queryObject.wOrL==item.dictValue}" :key="index"
                    v-for="(item, index) in wOrL">{{item.dictValue}}</view>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
            </view>
          </scroll-view>
          <view class="u-flex flex-center">
            <u-button size="medium" type="primary" :customStyle="customStyle" @click="closeDropdown('wOrL')">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item v-if="options.includes('schoolType')" v-model="queryObject.schoolType" :title="queryObject.schoolType || '全部类型'">
        <view class="slot-content u-padding-30 bg-fff">
          <scroll-view scroll-y style="height: 500rpx">
            <view class="u-text-center u-flex u-flex-wrap choose_wrapper">
              <view class="item_choose u-m-b-20 u-font-sm"
                    :class="{'active_choose': queryObject.schoolType==''}"
                    @click="chooseItem('schoolType', '')"
                    v-if="!liandong"
              >全部</view>
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('schoolType', item.dictValue)"
                    :class="{'active_choose': queryObject.schoolType==item.dictValue}" :key="index"
                    v-for="(item, index) in schoolType">{{item.dictValue}}</view>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
            </view>
          </scroll-view>
          <view class="u-flex flex-center">
            <u-button size="medium" type="primary" :customStyle="customStyle" @click="closeDropdown">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item v-if="options.includes('typeIds')" v-model="queryObject.typeIds" :title="queryObject.typeIds || '全部特色'">
        <view class="slot-content u-padding-30 bg-fff">
          <scroll-view scroll-y style="height: 500rpx">
            <view class="u-text-center u-flex u-flex-wrap choose_wrapper">
              <view class="item_choose u-m-b-20 u-font-sm"
                    :class="{'active_choose': queryObject.typeIds==''}"
                    @click="chooseItem('typeIds', '')"
                    v-if="!liandong"
              >全部</view>
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('typeIds', item.dictValue)"
                    :class="{'active_choose': queryObject.typeIds==item.dictValue}" :key="index"
                    v-for="(item, index) in typeIds">{{item.dictValue}}</view>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
            </view>
          </scroll-view>
          <view class="u-flex flex-center">
            <u-button size="medium" type="primary" :customStyle="customStyle" @click="closeDropdown">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item v-if="options.includes('uOrS')" v-model="queryObject.uOrS" :title="queryObject.uOrS || '本科/专科'">
        <view class="slot-content u-padding-30 bg-fff">
          <scroll-view scroll-y style="height: 200rpx">
            <view class="u-text-center u-flex u-flex-wrap choose_wrapper">
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('uOrS', '')"
                    v-if="!liandong"
                    :class="{'active_choose': queryObject.uOrS==''}"
              >不限</view>
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('uOrS', item.dictValue)"
                    :class="{'active_choose': queryObject.uOrS==item.dictValue}"
                    :key="index"
                    v-for="(item, index) in uOrS">{{item.dictValue}}</view>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
            </view>
          </scroll-view>
          <view class="u-flex flex-center">
            <u-button size="medium" type="primary" :customStyle="customStyle" @click="closeDropdown('uOrS')">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item v-if="options.includes('admissionsTimes')" v-model="queryObject.admissionsTimes" :title="queryObject.admissionsTimes || '批次'">
        <view class="slot-content u-padding-30 bg-fff">
          <scroll-view scroll-y style="height: 200rpx">
            <view class="u-text-center u-flex u-flex-wrap choose_wrapper">
              <view class="item_choose u-m-b-20 u-font-sm"
                    @click="chooseItem('admissionsTimes', '')"
                    v-if="!liandong"
                    :class="{'active_choose': queryObject.admissionsTimes==''}"
              >批次</view>
              <view class="item_choose u-m-b-20 u-font-sm eclipse-1"
                    @click="chooseItem('admissionsTimes', item.dictValue)"
                    :class="{'active_choose': queryObject.admissionsTimes==item.dictValue}"
                    :key="index"
                    v-for="(item, index) in admissionsTimes">{{item.dictValue}}</view>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
              <div class="data-item temp"></div>
            </view>
          </scroll-view>
          <view class="u-flex flex-center">
            <u-button size="medium" type="primary" :customStyle="customStyle" @click="closeDropdown('admissionsTimes')">确定</u-button>
          </view>
        </view>
      </u-dropdown-item>
    </u-dropdown>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {THEME} from "../../pages/mixins/config";

  export default {
    props:  {
      options: {
        type: Array,
        default: []
      },
      defautlProvince: {
        type: Boolean,
        default: false
      },
      admissionsTimesData: {
        type: Array,
        default: null
      },
      uOrSData: {
        type: Array,
        default: null
      },
      provinceNameData: {
        type: Array,
        default: null
      },
      schoolTypeData: {
        type: Array,
        default: null
      },
      typeIdsData: {
        type: Array,
        default: null
      },
      wOrLData: {
        type: Array,
        default: null
      },
      yearData: {
        type: Array,
        default: null
      },
      liandong: {
        type: Boolean,
        default: false
      },
      title_size: {
        type: Number,
        default: 28
      }
    },

    data() {
      return {
        queryObject: {

        },
        customStyle: {
          background: THEME.btn_active_bg_color,
          marginRight: '20px'
        },
        provinceName: [],
        uOrS: [],
        schoolType: [],
        typeIds: [],
        wOrL: [],
        admissionsTimes: [],
        year: [],
        active_color: THEME.text_active_color
      }
    },

    async mounted() {
      this.options.forEach(async item => {
        if (this[`${item}Data`] == null) {
          if (item == 'uOrS') {
            this[item] = await this.getDictByType('education')
          } else {
            if (item != 'year') {
              this[item] = await this.getDictByType(item)
            } else {
              this[item] = this.getYear()
            }
          }
        } else {
          this[item] = this[`${item}Data`]
        }
        if (this[item][0] && this.liandong) {
          this.$set(this.queryObject, item, this[item][0]['dictValue'])
        }
      })
      if (this.options.includes('provinceName') && this.defautlProvince) {
        this.$set(this.queryObject, 'provinceName', '重庆')
        this.$emit('choose', this.queryObject)
      }
    },

    methods:{
      closeDropdown(res) {
        this.$refs.uDropdown.close();
        if (this.liandong) {
          switch (res) {
            case 'provinceName':
              var provinceName = this.queryObject.provinceName
              this.queryObject = {
                provinceName,
                year: this.year[0].dictValue || '',
                admissionsTimes: this.admissionsTimes[0].dictValue || '',
                wOrL: this.wOrL[0].dictValue || '',
              }
              break
            case 'year':
              var {provinceName, year} = this.queryObject
              this.queryObject = {
                provinceName, year,
                admissionsTimes: this.admissionsTimes[0].dictValue || '',
                wOrL: this.wOrL[0].dictValue || '',
              }
              break
            case 'wOrL':
              var {provinceName, year, wOrL} = this.queryObject
              this.queryObject = {
                provinceName, year, wOrL, admissionsTimes: this.admissionsTimes[0].dictValue || ''
              }
              break
          }
        }
        this.$emit('choose', this.queryObject)
      },

      cancleChoose() {
        this.$refs.uDropdown.close();
      },

      async getDictByType(dictType) {
        if (!dictType) return []
        let res = await request({
          url: '/system/wx/dict/type/' + dictType,
          token: true,
        })
        return res.data
      },

      chooseItem(type, value) {
        this.$set(this.queryObject, type, value)
      },

      getYear() {
        let arr = []
        let start_year = 1993
        for(let i = 0; i < 40; i++) {
          var obj = {
            dictValue: start_year + i
          }
          arr.push(obj)
        }
        return arr
      }
    },

    watch: {
      admissionsTimesData: {
        deep: true,
        handler(newV) {
          this.admissionsTimes = newV
          if (this.liandong) {
            this.$set(this.queryObject, 'admissionsTimes', newV[0].dictValue || '')
            this.$emit('choose', this.queryObject)
          }
        }
      },
      uOrSData: {
        deep: true,
        handler(newV) {
          this.uOrS = newV
        }
      },
      provinceNameData: {
        deep: true,
        handler(newV) {
          this.provinceName = newV
        }
      },
      wOrLData: {
        deep: true,
        handler(newV) {
          this.wOrL = newV
          if (this.liandong) {
            this.$set(this.queryObject, 'wOrL', newV[0].dictValue || '')
            this.$emit('choose', this.queryObject)
          }
        }
      },
      yearData: {
        deep: true,
        handler(newV) {
          this.year = newV
          if (this.liandong) {
            this.$set(this.queryObject, 'year', newV[0].dictValue || '')
            this.$emit('choose', this.queryObject)
          }
        }
      },
    }
  }
</script>

<style scoped>

  .choose_wrapper {
    justify-content: space-between;
  }
  .item_choose {
    width: 150upx;
    border: 1px solid rgba(136, 138, 136, 0.42);
    color: rgb(136, 138, 136);
    padding: 10upx 0;
    border-radius: 8upx;
  }
  .temp {
    height: 0;
    width: 150upx;
    margin-bottom: 0;
    border: none;
    padding: 0;
  }
  .active_choose {
    border-color: #1F476D;
    color: #1F476D;
  }
</style>
